<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>计划详情</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/planList/planCont.css}" rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
	<div class="headerBox">
		<a href="javascript:history.go(-1);" class="headerBox_left"><img th:src="@{/ksdH5/img/planList/fanhuiBnt.png}"></a>
		<span>计划详情</span>
	</div>
	<div class="palnCont_topBox">
		<div class="palnCont_topBox_top">
			<div class="palnCont_topBox_top_left">
				<img id="bank_img" />
			</div>
			<div class="palnCont_topBox_top_middle">
				<strong id="bank_name_strong"></strong>
				<span id="city_name_span"></span>
			</div>
			<div class="palnCont_topBox_top_right">
				<a href="javascript:void(0)" class="palnCont_cancelBnt">取消计划</a>
			</div>
		</div>
		<div class="palnCont_topBox_middle">
			<span id="hk_cycle_span" ></span>
			<em id="status_em"></em>
		</div>
		<div class="palnCont_topBox_bottom">
			<div class="palnCont_topBox_bottom_left">
				<span>还款形式</span>
				<strong id="second_strong">笔/日</strong>
			</div>
			<div class="palnCont_topBox_bottom_middle">
				<span>计划还款</span>
				<strong  id="plan_amt_strong">1000</strong>
			</div>
			<div class="palnCont_topBox_bottom_right">
				<span>周转金</span>
				<strong id="plan_cbamt_strong">249</strong>
			</div>
		</div>
		<div class="palnCont_topBox_bottom">
			<div class="palnCont_topBox_bottom_left">
				<span>实际还款</span>
				<strong id="payed_strong">2000</strong>
			</div>
			<div class="palnCont_topBox_bottom_middle">
				<span>实扣手续费</span>
				<strong id="fred_strong">300+1</strong>
			</div>
			<div class="palnCont_topBox_bottom_right">
				<span>进度</span>
				<strong id="speed_strong" >20%</strong>
			</div>
		</div>
		<div class="lineBox">
			<img th:src="@{/ksdH5/img/planList/fgxBg.png}" />
		</div>
	</div>
	<ul class="palnCont_listBox"  id="item_list_ul">
		<!-- <li>
			<div class="palnCont_listBox_topBox">2018年12月12日</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/huankuanfangshi.png}" />
				<strong>消费</strong>
				<span class="palnCont_color_lvse">已执行 </span>
				<em>5750,70</em>
			</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/hkfs_hsIcon.png}" />
				<strong>退款</strong>
				<span class="palnCont_color_lvse">待执行</span>
				<em>5750,70</em>
			</div>
		</li>
		<li>
			<div class="palnCont_listBox_topBox">2018年12月12日</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/huankuanfangshi.png}" />
				<strong>消费</strong>
				<span class="palnCont_color_lvse">已执行 </span>
				<em>5750,70</em>
			</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/hkfs_hsIcon.png}" />
				<strong>退款</strong>
				<span class="palnCont_color_lvse">待执行</span>
				<em>5750,70</em>
			</div>
		</li>
		<li>
			<div class="palnCont_listBox_topBox">2018年12月12日</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/huankuanfangshi.png}" />
				<strong>消费</strong>
				<span class="palnCont_color_lvse">已执行 </span>
				<em>5750,70</em>
			</div>
			<div class="palnCont_listBox_bottomBox">
				<img th:src="@{/ksdH5/img/planList/hkfs_hsIcon.png}" />
				<strong>退款</strong>
				<span class="palnCont_color_lvse">待执行</span>
				<em>5750,70</em>
			</div>
		</li> -->
	</ul>
</div>
<!--左侧导航-->
<div class="huiseBox"></div>
<!--提示框-->
<div class="confirm">
	<div class="confirm_topBox">
		您确定要<span id="operatePlan">取消</span>该计划吗？
	</div>
	<div class="confirm_bntBox">
		<a href="javascript:void(0);" class="confirm_bntBox_left">取消</a>
		<a href="javascript:void(0);" class="confirm_bntBox_right" onclick="cancelPlan()">确定</a>
	</div>
</div>
<!--成功失败提示框-->
<!-- 
<div class="succeed">
	<div class="succeed_topBox">
		<div class="succeed_topBox_title">操作成功</div>
		<div class="succeed_topBox_cont">告知当前状态，信息和解决方</div>
	</div>
	<div class="succeed_bntBox">
		<a href="javascript:void(0);">确定</a>
	</div>
</div> -->
</body>
<script type="text/javascript">
mui.init({
	swipeBack:true
})

/*取消计划js*/
$(document).on('click','.palnCont_cancelBnt',function(){
	$('.huiseBox').show();
	$('.confirm').show();
});
$(document).on('click','.confirm_bntBox_left',function(){
	$('.huiseBox').hide();
	$('.confirm').hide();
});
$(document).on('click','.confirm_bntBox_right',function(){
	 $('.huiseBox').show();
	$('.confirm').hide();
	/* $('.succeed').show(); */
});
/*成功失败提示框*/
/* $(document).on('click','.succeed_bntBox',function(){
	$('.huiseBox').hide();
	 $('.succeed').hide(); *
}); */
</script>
<script th:inline="javascript">
	//获得项目根路径
	var ctx = [[@{/}]];
	//取出后台modelMap中的值
	var result= [[${result}]];
</script>

<script type="text/javascript">
//滚动条到底部加载更多
$(document).scroll(function(){
	if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        var shopIndex_box_listBox = new Array()
        for (a=0;a<20;a++){
        	shopIndex_box_listBox[a] = ''
        }
		for(i=0;i<shopIndex_box_listBox.length;i++){
			$(".palnCont_listBox").append(shopIndex_box_listBox[i]);
		}
        
        /*$.ajax({
        	type:"post",
        	url:"",
        	async:true,
			dataType:"json",
			success:function(data){
				for (var i = 0; i < sum; i++) {   
	                result +=	''
	            }
				$('.palnCont_listBox').append(result);
			},
			error:function(){
				alert('数据有误');
			}
        }); */
	}
});
var planId="";//计划id
$(function(){
	if(result.status=="SUCCESS"){
		var obj = result.obj;
		planId = obj.planId;
		$("#bank_img").attr("src",obj.cardImg);
		var bankNameNo = obj.cardName+"（"+obj.cardNo.substr(obj.cardNo.length-4)+"）";
		$("#bank_name_strong").text(bankNameNo);//银行名称银行尾号
		$("#hk_cycle_span").text(obj.planTime);//计划执行时间
		$("#status_em").text(obj.planStatus);//状态
		if(obj.planStatus=="已取消" ||obj.planStatus=="执行完成" ){
			$(".palnCont_cancelBnt").text("删除计划");
			$("#operatePlan").text("删除");
			
		}	
		$("#second_strong").text(obj.everyNum);//次数/每天
		$("#plan_amt_strong").text(obj.planAmt);//计划
		$("#plan_cbamt_strong").text(obj.cbAmt);;//周转金
		$("#payed_strong").text(obj.reallPay)//实际还款
		$("#fred_strong").text(obj.reallFee);//实扣手续费
		$("#speed_strong").text(obj.Percentage);//进度
		 //计划明细列表
		var items =$.parseJSON(obj.formatItmes) ;//把json字符串转javascript json对象
		if(items.length>0){
			var itemStr ="";
			$.each(items,function(index,obj1){
				if(obj1.type=="head"){
					if(index>0 || index!=(items.length-1) ){
						itemStr += "</li>";
					}
					itemStr += "<li>";
					itemStr += "<div class='palnCont_listBox_topBox'>"+obj1.time+"</div>";
				}else if(obj1.type=="消费")	{
					itemStr += "<div class='palnCont_listBox_bottomBox'>";
					itemStr += "<img src='/ksdH5/img/planList/huankuanfangshi.png'/>";
					itemStr += "<strong>"+obj1.type+"</strong>";
					/* itemStr += "<span class='palnCont_color_lvse'>"+obj1.status+"</span>"; */
					if(obj1.status=="已完成"){
						itemStr += "<span class='palnCont_color_lvse'>"+obj1.status+"</span>";
					} else {
						itemStr += "<span style='color:gray' class='palnCont_color_lvse'>"+obj1.status+"</span>";
					}
					itemStr += "<em>"+obj1.money+"</em>";
					itemStr += "</div>";
				}else if(obj1.type=="还款") {
					itemStr += "<div class='palnCont_listBox_bottomBox'>";
					itemStr += "<img src='/ksdH5/img/planList/hkfs_hsIcon.png' />";
					itemStr += "<strong>"+obj1.type+"</strong>";
					if(obj1.status=="已完成"){
						itemStr += "<span class='palnCont_color_lvse'>"+obj1.status+"</span>";
					} else {
						itemStr += "<span style='color:gray' class='palnCont_color_lvse'>"+obj1.status+"</span>";
					}
					itemStr += "<em>"+obj1.money+"</em>";
					itemStr += "</div>";
				}	
			})
			$("#item_list_ul").html(itemStr);
		}
	}

})
//取消计划
function cancelPlan(){
	 $.ajax({
			url : ctx+ "h5/plan/cancel",
			type : "POST",
			data:{
				"planId":planId
			},
			success : function(re) {
			if (re.status == "out") { //session过期
				//跳转登陆页面
				location.href =  ctx+ "h5/login";
			}
			mui.toast(re.msg,{ duration:'long'});
			if (re.status == "SUCCESS") {
				//跳转计划列表
				setTimeout(function (){
					location.href =  ctx+ "h5/plan/list";
				}, 3000);
				
			} else {
				mui.toast(re.msg,{ duration:'long'});
			}
		}
	}); 
}

</script>
</html>
